<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: #60a1f1;
        }

        .box {
            width: 80%;
            height: 1000px;
            margin: 20px auto;
        }

        .shang {
            position: relative;
            width: 100%;
        }

        .cs {
            width: 200px;
            height: 30px;
            color: #e7f9fc;
            border-radius: 20px;
            border: none;
            background-color: #6e9ce8;
            float: right;
            margin-top: 100px;
        }

        span {
            color: #e7f9fc;
        }

        .sj {
            position: absolute;
            margin-top: 100px;
        }

        .dz {
            margin-left: 1050px;
            margin-top: 200px;

        }

        .zhong {
            width: 100px;
            margin-top: 100px;
        }

        .du {
            font-size: 100px;
            color: white;
        }

        .kq {
            color: #f1f7ec;
            background-color: #83d06c;
            width: 50px;
            border-radius: 10px;
            text-align: center;
            float: left;
        }

        ul {
            display: flex;
        }

        ul li {
            list-style: none;
            color: white;
            margin-right: 50px;
        }

        .xia {
            width: 90%;
            height: 600px;
            margin: auto;
            background-color: white;
            border-radius: 10px;
        }

        ol {
            margin-left: 150px;
        }

        ol li {
            width: 120px;
            height: 300px;
            color: black;
            margin-top: 100px;
            float: left;
            list-style: none;
            margin-left: 20px;
        }

        ol li img {
            width: 50px;
            height: 50px;
        }

        h3 {
            padding-left: 20px;
            padding-top: 30px;
        }
        font{
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="aa">
            <!-- <div class="shang">
                <span class="sj">2025-02-20 农历 正月甘三</span>
                <span class="dz">📍北京市</span><input type="text" placeholder="搜索城市" class="cs">
            </div>
            <div class="zhong">
                <span class="du">2°</span>
                <p class="kq">21优</p><br>
                <p style="width: 200px;" class="tq"><span>🌤 晴&nbsp;东南风 &nbsp; 2级</span></p>
            </div><br>
            <ul>
                <li>今天：晴-5-4°C</li>
                <li>紫外线</li>
                <li>湿度 24%</li>
                <li>日出 07:00</li>
                <li>日落 17:56</li>
            </ul><br> -->
        </div>
        <div class="xia">
            <h3>7日内天气预报</h3>
            <ol>
                <!-- <li>
                    <p>今天</p>
                    <p>02月20日</p><br>
                    <img src="./索拉卡.jpg" alt="">
                    <p>晴</p>
                    <p>-5-4°C</p>
                    <p>东北风 2级</p>
                </li> -->

            </ol>
        </div>
    </div>
</body>

</html>
<script src="./lib/axios.min.js"></script>
<script>
    var box = document.querySelector('.box')
   
    var ol = document.querySelector('ol')
    
    var ar = 110100
    function render(aa) {
        axios.get(`https://hmajax.itheima.net/api/weather?city=${aa}`).then(res => {
            console.log(res.data.data);
            var dataStr = res.data.data.dayForecast;
           
            var strArr = dataStr.map((ele, index) => {
                return `
                <li>
                    <p><font>${ele.dateFormat}</font></p>
                    <p>${ele.date}</p><br>
                    <img src="${ele.weatherImg}" alt="">
                    <p><font>${ele.weather}</font></p>
                    <p><font>${ele.temNight}-${ele.temDay}°C</font></p>
                    <p>${ele.windDirection} ${ele.windPower}</p>
                    </li>
                </ol>`
            }).join('')
            
            ol.innerHTML = strArr

        })
    }
    function xr(aa){
        axios.get(`https://hmajax.itheima.net/api/weather?city=${aa}`).then(res=>{
            var arr = [{}]
            
            console.log(arr);
            var rq = res.data.data.date;
            var bj = res.data.data.area;
            var nl = res.data.data.dateLunar;
            var ds = res.data.data.temperature;
            var wd = res.data.data.psPm25;
            var kq = res.data.data.psPm25Level;
            var we = res.data.data.weather;
            var fj = res.data.data.windDirection;
            var jb = res.data.data.windPower;
            var newStr = arr.map((ele, index) => {
                
                return `
        <div class="shang">
            <span class="sj">${rq} 农历 ${nl}</span>
            <span class="dz">📍${bj}</span><input type="text" placeholder="搜索城市" class="cs">
        </div>
        <div class="zhong">
            <span class="du">${ds}°</span><p class="kq">${wd}${kq}</p><br>
            <p style="width: 200px;" class="tq"><span>🌤 ${we}&nbsp;${fj} &nbsp; ${jb}</span></p>
        </div><br>
        <ul>
            <li>今天：晴-5-4°C</li>
            <li>紫外线</li>
            <li>湿度 ${wd}%</li>
            <li>日出 07:00</li>
            <li>日落 17:56</li>
        </ul><br>`
            }).join('')
            console.log(newStr);
            document.querySelector('.aa').innerHTML=newStr;
        })
    }
    xr(ar)
    render(ar)
    box.addEventListener('input', function (e) {
        var cs = document.querySelector('.cs')
        axios.get(`https://hmajax.itheima.net/api/weather/city?city=${cs.value}`).then(res => {
            console.log(res.data.data);
            var arr = res.data.data;
            for(i=0;i<arr.length;i++){
                console.log(arr[i].code);
                var num=arr[i].code
                render(num)
                xr(num)
                return
            }
        })
    })
</script>